import React, { Component } from 'react';
import { ImageBackground, ScrollView, View, Image, StatusBar, Text, TouchableOpacity, FlatList, RefreshControl, DeviceEventEmitter } from 'react-native';
import TabBarTitle from '../components/TabBarTitle';
import { TabBarImage, TabBarAnimationImage } from '../components/TabBarImage';
import Colors from '../constants/Colors';
import { statusBarHeight, titleHeight, width, unitWidth } from '../constants/AdapterUtil';
import { MyHeader } from '../components/MyHeader';
import { SubmitButton8, AddButton, ReduceButton, SubmitButton9, SubmitButton10, SubmitButton4, SubmitButton13, SubmitButton15, SubmitButton11, SubmitButton12 } from '../components/Button';
import { api_member_cart_get_list, api_order_workorder_serviceOrderDetail, api_order_workorder_deleteOrder, api_order_workorder_isCooperation, api_order_workorder_confirmdelivery } from '../constants/HttpServices';
import { postFetch } from '../constants/HttpExtension';
import MyListView from '../components/MyListView';
import { DeleteTextView } from '../components/MyTextView';
import { CommonModal2, BottomPayModal, CommonModal3, BottomReasonModal, CommonModal4 } from '../components/Modal';
import { MeItem, IconItem, OrderDetailHeaderItem, Item3, RatingItem } from '../components/Item';
import { MyInput1 } from '../components/Input';
import TextUtil from '../constants/TextUtil';
import CommonUtil from '../constants/CommonUtil';
import { show } from '../constants/Toast';

export default class BidOrderDetailScreen extends Component {
    constructor(props) {
        super(props)
        this.no = this.props.navigation.getParam('no', '0')
        this.state = {
            online: 0,//是否在线

            progress: 2,//当前订单进度

            info: {},

            lc1: ['雇主下单', '确认收货', '评价'],
            lc2: ['雇主下单', '确认合作', '开工生产', '收货', '评价'],
            list: ['https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png',
                'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png']
        }
    }

    componentDidMount() {
        this.props.navigation.addListener('didFocus', payload => {
            this.getData()
        })
    }

    render() {
        return (
            <View style={{ flex: 1, backgroundColor: Colors.colorF7 }}>
                <MyHeader title='订单详情' leftImg={require('../res/ic_arrow_left.png')} leftClick={() => { this.props.navigation.pop() }} />
                {/* {this.state.online == 0 ? this.getOutLineView() : this.getOnLineView()} */}
                {this.getOnLineView()}
                <View style={{
                    width: width, height: 50 * unitWidth, bottom: 0 * unitWidth, position: 'absolute',
                    flexDirection: 'row', alignItems: 'center', justifyContent: 'center', backgroundColor: Colors.white
                }}>
                    {this.getBottonBtn(this.state.info)}
                </View>
                <CommonModal2 ref='CommonModal1' title='是否确认合作？' comfirmText='确定' cancelText='取消'
                    cancelClick={() => {

                    }}
                    comfirmClick={() => {
                        this.confirmCooperation(1)
                    }} />
                <CommonModal4 ref='CommonModal2' title='是否拒绝合作？' tips='Tip:这将影响您的综合星级' comfirmText='确定' cancelText='取消'
                    cancelClick={() => {

                    }}
                    comfirmClick={() => {
                        this.confirmCooperation(0)
                    }} />
                <CommonModal3 ref='CommonModal3' title={'恭喜你确认成功\n请等待雇主签署电子合同'} btnText='确定'
                    onPress={() => {
                        this.refs.CommonModal3.hideModal();
                    }}
                    onClosePress={() => {

                    }} />
                <CommonModal2 ref='CommonModal4' title='是否删除订单？' comfirmText='确定' cancelText='取消'
                    cancelClick={() => {

                    }}
                    comfirmClick={() => {
                        this.deleteOrder();
                    }} />
                <CommonModal2 ref='CommonModal5' title='是否确认送货？' comfirmText='确定' cancelText='取消'
                    cancelClick={() => {

                    }}
                    comfirmClick={() => {
                        this.confirmSend();
                    }} />
            </View>
        )
    }

    // getOutLineView() {
    //     return (
    //         <ScrollView style={{ marginBottom: 50 * unitWidth }}>
    //             <OrderDetailHeaderItem list={this.state.lc1} progress={this.state.progress} />
    //             <View style={{
    //                 width: width, alignSelf: 'center',
    //                 backgroundColor: Colors.white, paddingVertical: 10 * unitWidth
    //             }}>
    //                 <Item3 style={{ marginTop: 22 * unitWidth, marginLeft: 17 * unitWidth }} text='报价详情' />
    //                 <Text style={{ fontSize: 14, marginTop: 5 * unitWidth, marginLeft: 35 * unitWidth }}>雇主：{this.state.info.merchname}</Text>
    //                 <Text style={{ fontSize: 14, marginTop: 5 * unitWidth, marginLeft: 35 * unitWidth }}>中标金额：<Text style={{ color: Colors.colorRed }}>￥{this.state.info.total_price}</Text></Text>
    //                 <Text style={{ fontSize: 14, marginTop: 5 * unitWidth, marginLeft: 35 * unitWidth }}>交货日期：{this.state.info.delivery_date}</Text>
    //             </View>
    //             <View style={{
    //                 width: width, alignSelf: 'center',
    //                 backgroundColor: Colors.white, paddingVertical: 10 * unitWidth, marginTop: 5 * unitWidth
    //             }}>
    //                 <Item3 style={{ marginLeft: 17 * unitWidth }} text='订单信息' />
    //                 <Text style={{ fontSize: 14, marginTop: 5 * unitWidth, marginLeft: 35 * unitWidth }}>订单编号：124526581</Text>
    //                 <Text style={{ fontSize: 14, marginTop: 5 * unitWidth, marginLeft: 35 * unitWidth }}>创建时间：2020/10/28  10:20:30</Text>
    //                 <Text style={{ fontSize: 14, marginTop: 5 * unitWidth, marginLeft: 35 * unitWidth }}>订单状态：<Text style={{ color: Colors.colorOrange }}>待收货</Text></Text>
    //             </View>
    //             {this.state.progress > 2 ?
    //                 <View style={{
    //                     width: width, alignSelf: 'center',
    //                     backgroundColor: Colors.white, paddingVertical: 10 * unitWidth, marginTop: 5 * unitWidth
    //                 }}>
    //                     <Item3 style={{ marginLeft: 17 * unitWidth }} text='评价' />
    //                     <View style={{ flexDirection: 'row', marginTop: 5 * unitWidth, alignItems: 'center' }}>
    //                         <Text style={{ fontSize: 14, marginLeft: 35 * unitWidth }}>给雇主评价：</Text>
    //                         <View style={{ width: 10 * unitWidth, height: 10 * unitWidth, borderRadius: 5 * unitWidth, backgroundColor: Colors.colorOrange }} />
    //                         <Text style={{ fontSize: 14, marginLeft: 5 * unitWidth }}>好评</Text>
    //                     </View>
    //                     <Text style={{ fontSize: 14, marginTop: 5 * unitWidth, marginLeft: 35 * unitWidth }}>更多评价：完成质量高，服务态度非常好</Text>
    //                 </View> : null}
    //             <View style={{
    //                 width: 345 * unitWidth, height: 50 * unitWidth, alignSelf: 'center', top: 82 * unitWidth, position: 'absolute',
    //                 backgroundColor: Colors.white, borderRadius: 10, flexDirection: 'row', alignItems: 'center'
    //             }}>
    //                 <Text style={{ color: Colors.black, fontSize: 16, fontWeight: 'bold', marginLeft: 15 * unitWidth }}>需求详情</Text>
    //                 <Image source={require('../res/me_back.png')} style={{ width: 7 * unitWidth, height: 12 * unitWidth, position: 'absolute', right: 15 * unitWidth }} />
    //             </View>
    //         </ScrollView>
    //     )
    // }

    getOnLineView() {
        return (
            <ScrollView style={{ marginBottom: 50 * unitWidth }}>
                <OrderDetailHeaderItem list={this.state.lc2} progress={this.state.progress} />
                <View style={{
                    width: width, alignSelf: 'center',
                    backgroundColor: Colors.white, paddingVertical: 10 * unitWidth
                }}>
                    <Item3 style={{ marginTop: 22 * unitWidth, marginLeft: 17 * unitWidth }} text='报价详情' />
                    <Text style={{ fontSize: 14, marginTop: 5 * unitWidth, marginLeft: 35 * unitWidth }}>雇主：{this.state.info.merchname}</Text>
                    <Text style={{ fontSize: 14, marginTop: 5 * unitWidth, marginLeft: 35 * unitWidth }}>中标金额：<Text style={{ color: Colors.colorRed }}>￥{this.state.info.total_price}</Text></Text>
                    <Text style={{ fontSize: 14, marginTop: 5 * unitWidth, marginLeft: 35 * unitWidth }}>交货日期：{this.state.info.delivery_date}</Text>
                </View>
                <View style={{
                    width: width, alignSelf: 'center',
                    backgroundColor: Colors.white, paddingVertical: 10 * unitWidth, marginTop: 5 * unitWidth
                }}>
                    <Item3 style={{ marginLeft: 17 * unitWidth }} text='订单信息' />
                    <Text style={{ fontSize: 14, marginTop: 5 * unitWidth, marginLeft: 35 * unitWidth }}>订单编号：{this.state.info.out_trade_no}</Text>
                    <Text style={{ fontSize: 14, marginTop: 5 * unitWidth, marginLeft: 35 * unitWidth }}>创建时间：{this.state.info.createtime}</Text>
                    {this.state.progress > 2 ?
                        <Text style={{ fontSize: 14, marginTop: 5 * unitWidth, marginLeft: 35 * unitWidth }}>确认合作时间：{this.state.info.confirm_time}</Text>
                        : null}
                    {this.state.progress > 3 ?
                        <Text style={{ fontSize: 14, marginTop: 5 * unitWidth, marginLeft: 35 * unitWidth }}>服务商送货时间：{this.state.info.confirm_delivery_time}</Text>
                        : null}
                    <Text style={{ fontSize: 14, marginTop: 5 * unitWidth, marginLeft: 35 * unitWidth }}>订单状态：<Text style={{ color: Colors.colorOrange }}>{this.getStatuText(this.state.info)}</Text></Text>
                </View>
                {this.state.progress > 2 ?
                    <View style={{
                        width: width, alignSelf: 'center',
                        backgroundColor: Colors.white, paddingVertical: 10 * unitWidth, marginTop: 5 * unitWidth
                    }}>
                        <Item3 style={{ marginLeft: 17 * unitWidth }} text='支付信息' />
                        <Text style={{ fontSize: 14, marginTop: 5 * unitWidth, marginLeft: 35 * unitWidth }}>支付方式：<Text style={{ color: Colors.colorOrange }}>{this.state.info.type == 1 ? '全款（低于5万元）' : '5-5(5成定金，收货确认5成)'}</Text></Text>
                        <Text style={{ fontSize: 14, marginTop: 5 * unitWidth, marginLeft: 35 * unitWidth }}>预支付：<Text style={{ color: Colors.colorOrange }}>￥{this.state.info.pay_price}</Text></Text>
                        {this.state.progress > 4 ?
                            <Text style={{ fontSize: 14, marginTop: 5 * unitWidth, marginLeft: 35 * unitWidth }}>收货支付：<Text style={{ color: Colors.colorOrange }}>￥{this.state.info.two_pay_price}</Text></Text>
                            : null}
                    </View> : null}
                {this.state.progress > 4 ?
                    <View style={{
                        width: width, alignSelf: 'center',
                        backgroundColor: Colors.white, paddingVertical: 10 * unitWidth, marginTop: 5 * unitWidth
                    }}>
                        <Item3 style={{ marginLeft: 17 * unitWidth }} text='评价' />
                        <View style={{ flexDirection: 'row', marginTop: 5 * unitWidth, alignItems: 'center' }}>
                            <Text style={{ fontSize: 14, marginLeft: 35 * unitWidth }}>给雇主评价：</Text>
                            <View style={{ width: 10 * unitWidth, height: 10 * unitWidth, borderRadius: 5 * unitWidth, backgroundColor: Colors.colorOrange }} />
                            <Text style={{ fontSize: 14, marginLeft: 5 * unitWidth }}>{CommonUtil.getCommentStatusText(this.state.info.assess ? this.state.info.assess.score : '1')}</Text>
                        </View>
                        <Text style={{ fontSize: 14, marginTop: 5 * unitWidth, marginLeft: 35 * unitWidth }}>更多评价：{this.state.info.assess ? this.state.info.assess.content : ''}</Text>
                    </View> : null}
                <TouchableOpacity style={{
                    width: 345 * unitWidth, height: 50 * unitWidth, alignSelf: 'center', top: 82 * unitWidth, position: 'absolute',
                    backgroundColor: Colors.white, borderRadius: 10, flexDirection: 'row', alignItems: 'center'
                }} activeOpacity={1} onPress={() => {
                    this.props.navigation.navigate('DemandDetail', { id: this.state.info.work_order_id })
                }}>
                    <Text style={{ color: Colors.black, fontSize: 16, fontWeight: 'bold', marginLeft: 15 * unitWidth }}>需求详情</Text>
                    <Image source={require('../res/me_back.png')} style={{ width: 7 * unitWidth, height: 12 * unitWidth, position: 'absolute', right: 15 * unitWidth }} />
                </TouchableOpacity>
            </ScrollView>
        )
    }

    getBottonBtn(item) {
        if (item.is_cooperation == '0') {
            return (<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
                <SubmitButton10 style={{}} text='拒绝合作'
                    onPress={() => {
                        this.refs.CommonModal2.showModal();
                    }} />
                <SubmitButton12 style={{ marginLeft: 70 * unitWidth }} text='确认合作'
                    onPress={() => {
                        this.refs.CommonModal1.showModal();
                    }} />
            </View>)
        } else if (item.is_cooperation == '1' && item.is_contract == '0') {
            return null
        } else if (item.is_cooperation == '2') {
            return null
        } else if (item.status == '0') {
            return null
        } else if (item.status == '1') {
            return (<SubmitButton4 style={{}} text='确认送货'
                onPress={() => {
                    this.refs.CommonModal5.showModal()
                }} />)
        } else if (item.status == '3') {
            return null
        } else if (item.status == '2') {
            if (item.is_service_comment == '0') {
                return (<SubmitButton4 text='评价' onPress={() => { this.props.navigation.navigate('EvaluateEmployer', { no: this.no }) }} />)
            } else {
                return (<SubmitButton13 text='删除订单' onPress={() => { this.refs.CommonModal4.showModal(); }} />)
            }
        } else if (item.status == '4') {
            return (<SubmitButton13 text='删除订单' onPress={() => { this.refs.CommonModal4.showModal(); }} />)
        } else if (item.status == '5') {
            return null
        }
    }

    getStatuText(item) {
        if (item.is_cooperation == '0') {
            return '待服务商确定合作'
        } else if (item.is_cooperation == '1' && item.is_contract == '0') {
            return '待签署电子合同'
        } else if (item.is_cooperation == '2') {
            return '交易失败（服务商拒绝合作）'
        } else if (item.status == '0') {
            return '待雇主支付'
        } else if (item.status == '1') {
            return '待送货'
        } else if (item.status == '3') {
            return '待雇主确认收货'
        } else if (item.status == '2') {
            return '已完成'
        } else if (item.status == '4') {
            return '已完成'
        } else if (item.status == '5') {
            return '交易失败（超过规定时间）'
        }
    }

    getData() {
        let params = {
            out_trade_no: this.no
        }
        postFetch(api_order_workorder_serviceOrderDetail, params, {
            success: (response) => {
                let progress = 0;
                let online = response.result.payment_type == '0' ? 0 : 1;
                if (response.result.is_cooperation == '0') {
                    progress = 2
                } else if (response.result.is_cooperation == '1' && response.result.is_contract == '0') {
                    progress = 2
                } else if (response.result.is_cooperation == '2') {
                    progress = 2
                } else if (response.result.status == '0') {
                    progress = 2
                } else if (response.result.status == '1') {
                    progress = 3
                } else if (response.result.status == '3') {
                    progress = 4
                } else if (response.result.status == '2') {
                    if (response.result.is_service_comment == '0') {
                        progress = 4
                    } else {
                        progress = 5
                    }
                } else if (response.result.status == '4') {
                    progress = 5
                } else if (response.result.status == '5') {
                    progress = 4
                }
                this.setState({
                    info: response.result,
                    online: online,
                    progress: progress
                })
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }

    deleteOrder() {
        let params = {
            out_trade_no: this.no
        }
        postFetch(api_order_workorder_deleteOrder, params, {
            success: (response) => {
                show('删除成功');
                this.props.navigation.pop();
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }

    //确认交货
    confirmSend() {
        let params = {
            out_trade_no: this.no
        }
        postFetch(api_order_workorder_confirmdelivery, params, {
            success: (response) => {
                show('确认成功');
                this.getData()
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }

    //确认合作
    confirmCooperation(status) {
        let params = {
            out_trade_no: this.no,
            status: status
        }
        postFetch(api_order_workorder_isCooperation, params, {
            success: (response) => {
                show('确认成功');
                this.getData()
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }
}